<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示 点击事件
 * 注意事项，同一个点击事件只能注册一次，如果多次注册，只生效最后一次的事件
 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer");

  // 加入一些实体
  const point1 = viewer.entities.add({
    position: new Cesium.Cartesian3.fromDegrees(-100.0, 10.0),
    point: {
      pixelSize: 20,
      color: Cesium.Color.RED,
    },
  });
  const point2 = viewer.entities.add({
    position: new Cesium.Cartesian3.fromDegrees(-90.0, 80.0),
    point: {
      pixelSize: 30,
      color: Cesium.Color.YELLOW,
    },
  });
  // 选中状态改变的钩子
  viewer.selectedEntityChanged.addEventListener((entity) => {
    console.log("selectedEntityChanged entity", entity);
  });

  //   viewer.trackedEntity = point1;赋值时调用
  viewer.trackedEntityChanged.addEventListener((entity) => {
    console.log("trackedEntityChanged entity", entity);
  });

  setTimeout(() => {
    viewer.trackedEntity = point1;
  }, 3000);
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
